<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>函数的call()和apply()方法</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
        color: gray;
    }

    span {
        color: black;
        font-size: 40px;
        display: block;
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>
<script>

    /*
     * this指的是一个对象
     * 调用方式不同，this指向的对象也不同
     *   1：以函数的形式调用时，this指向的永远是window
     *   2：以方法的形式调用时，this就是调用方法的那个对象
     *   3：以构造函数形式调用时,this就是新创建的这个对象
     *   4：使用call(obj)和apply(obj)方法调用时，this就是方法中’obj‘指定的对象
   */

    {
        var name = "我是window"

        function alt() {
            alert(this.name)
        }

        //定义一个对象test
        const test = {
            name: "我是张三",
            test_Fun: function () {
                alert(this.name)
            }
        }
        // 定义一个对象test1
        const test1 = {
            name: "我不是张三是李四"
        }
        // 函数直接调用this指向window
        // alt()
        //使用函数的call()方法该表this指向
        // alt.call(test)
        //使用函数的apply()方法该表this指向
        // alt.apply(test1)
        //调用test中的test_Fun()方法  this值得就是test中的name
        // test.test_Fun()
        //调用函数的call()方法，将test调用的test_Fun()中的this指向直接改变
        // test.test_Fun.call(test1)
    }

    {
        function alt1(age, gender) {
            alert(this.name+ "\n" +"性别" + age + "今年" + gender + "岁！！")
        }

        //定义一个对象test
        const tes = {
            name: "我是张三",
            test_Fun: function () {
                alert(this.name)
            }
        }
        // 定义一个对象test1
        const tes1 = {
            name: "我不是张三是李四"
        }

        //函数调用
        alt1.call(tes, "男", 22)
        alt1.apply(tes1,["女",12])
    }
</script>
<body>
</body>
</html>